<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/show.css">
        <script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
        <div class="show">
            <h1>当前游戏销量前十</h1>
            <div style="width: 1300px; height: 480px;" id="myechars">
                <script>
                    $.ajax({
                        url: 'main?action=show',
                        dataType: 'json',
                        success: function (data) {
                            var key = new Array();
                            var value = new Array();
                            for (var i in data) {
                                key[i] = data[i].key;
                                value[i] = data[i].value;
                            }
                            show(key, value);
                        }
                    });
                    function show(key, value) {
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('myechars'));
                        // 指定图表的配置项和数据
                        option = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                                }
                            },
                            grid: {
                                left: '5%',
                                right: '5%',
                                bottom: '5%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: key,
                                    axisTick: {
                                        alignWithLabel: true
                                    }
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: [
                                {
                                    name: '出售数量',
                                    type: 'bar',
                                    barWidth: '50%',
                                    data: value,
                                    itemStyle: {
                                        normal: {
                                            color: 'skyblue'
                                        }
                                    }
                                }
                            ]
                        };

                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    }
                </script>
            </div>
        </div>